import React, { useEffect, useState } from 'react';
import Step from './components/Step';
import StepTwoContent from './components/StepTwoContent';
import StepOneContent from './components/StepOneContent';
import './index.less';
import { connect } from 'umi';
import { Spin } from 'antd';
import { postQueryIssuePlanList } from './service';
import moment from 'moment/moment';

const ShorttermForecasting = (props) => {
  const { searchParams, dispatch, searchForm } = props;

  const [activeStep, setActiveStep] = useState('1');

  useEffect(() => {
    (async () => {
      await getDefault();
    })();
    dispatch({
      type: 'shortTermForecastingRedesignV2/setState',
      payload: {
        searchForm: searchParams,
        // 甘肃默认考虑储能
        store: searchParams.marketId === 'PXBGS' ? 1 : 0,
        // 默认Ai开关为关
        openAi: 0,
        // 重置策略表格
        dataList: [],
      },
    });
  }, [searchParams]);

  const getDefault = async () => {
    setActiveStep('');
    dispatch({
      type: 'shortTermForecastingRedesignV2/setState',
      payload: {
        issuePlanTableData: [],
      },
    });
    // 获取查询申报计划列表
    const res = await postQueryIssuePlanList({
      calendarDate: searchParams.calendarDate,
      marketId: searchParams.marketId,
      stationId: searchParams.stationId,
      saveType: searchParams.saveType,
    });

    const _diff = moment()
      .startOf('days')
      .diff(moment(searchParams?.calendarDate).startOf('days'), 'days');
    // executeStatus为1则代表已执行
    const _disabled = !!res?.data?.some((i) => i.executeStatus === 1);
    const _saveButtonDisabled = _diff >= 0 ? true : _disabled;
    const _activeStep = _saveButtonDisabled ? '2' : '1';
    setActiveStep(_activeStep);
    dispatch({
      type: 'shortTermForecastingRedesignV2/setState',
      payload: {
        issuePlanTableData: res?.data || [],
        saveButtonDisabled: _saveButtonDisabled,
      },
    });
  };

  if (!searchForm.marketId) return <Spin spinning />;
  return (
    <div className="shortterm-forecasting">
      <div className="step-box">
        <Step value={activeStep} onChange={(v) => setActiveStep(v + '')} />
      </div>

      {activeStep === '1' && (
        <div className="step-content">
          <StepOneContent />
        </div>
      )}
      {activeStep === '2' && (
        <div className="step-content">
          <StepTwoContent />
        </div>
      )}
    </div>
  );
};

export default connect(({ shortTermForecastingRedesignV2 }) => ({
  searchForm: shortTermForecastingRedesignV2.searchForm,
}))(ShorttermForecasting);
